@import './styles/index.less';

#root {
  width: 100%;
  height: 100%;
}

.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &-header {
    display: flex;
    height: 64px;
    line-height: 64px;
    padding: 0 50px;
    color: rgb(0 0 0 / 85%);
    background: #001529;

    .app-logo {
      width: 100px;
      height: 100%;
      background: url('./logo.svg');
    }
  }

  &-main {
    flex: 1;
    display: flex;
    min-width: 500px;

    .app-aside {
      flex-shrink: 0;
      width: 200px;
      box-shadow: 4px 0 3px rgb(0 0 0 / 10%);
    }

    .app-right {
      padding: 0 10px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 400px;
      height: 100%;

      .app-content {
        width: 100%;
        height: 100%;
        padding: 10px;
        overflow: auto;
      }
    }
  }
}

.root-layout {
  height: 100%;

  .ant-layout-header {
    padding: 0 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .app-logo {
    animation: app-logo-spin infinite 20s linear;
  }
}

@keyframes app-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
